<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/fastclick.js"></script>
    <style>
        #header {
            background: #fbdb0a;
            color: #000;
            border-bottom: #b2b2b2 solid 1px;
        }
    </style>
</head>

<body style="background:#fff">
    <div v-cloak id="register_two" class="register_two">

        <section class="register_one register_pub" v-show="state == 0">
            <div class="register_one_title">
                <h1>注册</h1>
                <p>欢迎使用<span id="appname"></span></p>
            </div>
            <div class="register_one_input">
                <span class="phone_left">+86</span>
                <input class="" type="number" maxlength="11" @click="inputImport" v-model="input" id="phone" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11)">
                <span class="phone_right" @click="clearPhone"></span>
                <span class="phone_right2" v-if="input.length == 11"></span>
            </div>
            <div class="register_one_next">
                <button class="nextStep" @click="login">登录</button>
            </div>
        </section>

        <section class="register_one register_pub" v-show="state !== 0">
            <div class="register_one_title">
                <h1>注册</h1>
                <p>请输入{{input}}收到的验证码</p>
            </div>
            <div class="register_two_input">
                <input class="" type="number" maxlength="11" v-model="code" placeholder="验证码">
            </div>
            <div class="register_one_next">
                <span class="getCode" @click="getCode" v-show="codeState">获取验证码</span>
                <span class="times" v-show="!codeState">时间剩余{{time}}s</span>
                <button class="nextStep" @click="login">登录</button>
            </div>
        </section>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script src="../../script/jquery.min.js"></script>
<script type="text/javascript">
    apiready = function() {
        var dialog = new auiDialog();
        var appName = api.appName;
        var appname = $api.byId('appname');
        appname.innerHTML = appName
        FastClick.attach(document.body);
        var vm = new Vue({
            el: '#register_two',
            data: {
                state: 0,
                input: '',
                code: '',
                codeState: true,
                time: 120,
                item: [],
                state2: false
            },
            methods: {
                nextStep: function() {
                    if (this.input.length == 11) {
                        this.state = 1
                    } else {
                        alert('手机号码不正确')
                    }
                },
                clearPhone: function() {
                    this.input = ''
                },
                inputImport() {
                    $api.byId('phone').focus()
                },
                getCode: function() {
                    var that = this;
                    that.codeState = false;
                    let timer = setInterval(() => {
                        that.time--;
                        if (that.time === 0) {
                            clearInterval(timer);
                            that.codeState = true;
                            that.time = 120;
                        }
                    }, 1000);

                    $.ajax({
                        type: "get",
                        url: "http://res.txingdai.com/account/code",
                        dataType: 'json',
                        async: false,
                        data: {
                            boundleId: 'com.yuanguinfo.xiaotang',
                            channel: 'appStore',
                            phone: that.input,
                            develop: false
                        },
                        success: function(data) {

                        }
                    });
                },
                login: function() {
                    var that = this
                    $.ajax({
                        type: "get",
                        url: "http://res.yuanguinfo.com/account/login",
                        dataType: 'json',
                        async: false,
                        data: {
                            // boundleId: 'com.yuanguinfo.xiaotang',
                            // channel: 'appStore',
                            phone: that.input,
                            code: that.code
                        },
                        success: function(data) {
                            $api.setStorage('phone', that.input)
                            $api.isDownload(api.pageParam.item, api.pageParam.key)
                        }
                    });
                },
                ceshi() {
                    $api.setStorage('phone', this.input)
                    $api.isDownload(api.pageParam.item, api.pageParam.key)
                }
            },
            created: function() {

            },
            watch: {
                input(val) {
                    var that = this
                    if (val.length === 11) {
                        $api.byId('phone').blur()
                        dialog.alert({
                                title: "提示",
                                msg: '电话号码验证成功',
                                buttons: ['确定']
                            }, function(ret) {
                                $.ajax({
                                    type: "get",
                                    url: "http://res.yuanguinfo.com/account/login",
                                    dataType: 'json',
                                    async: false,
                                    data: {
                                        phone: that.input,
                                        code: that.code
                                    },
                                    success: function(data) {
                                        document.activeElement.blur()
                                        $api.setStorage('phone', that.input)
                                        $api.isDownload(api.pageParam.item, api.pageParam.key)
                                    }
                                });
                            })
                    }
                }
            },
            mounted: function() {
                this.item = api.pageParam.item
            }
        })
    };
</script>

</html>
